<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-06-10 10:59:55
 * @LastEditors: william
 * @LastEditTime: 2025-08-21 17:00:25
-->
<template>
  <CustomModal
    title="修改昵称"
    v-model="visible"
    :showCancelButton="false"
    :confirmText="$t('public.sure')"
    @confirm="modelConfirm"
  >
    <up-toast ref="uToastRef" />
    <scroll-view class="scroll-content" scroll-y>
      <uni-forms
        ref="uFormRef"
        label-position="left"
        :modelValue="formData"
        :rules="rules"
        style="margin-top: 40rpx"
      >
        <uni-forms-item name="nickName">
          <template #label>
            <view class="nw-label">{{ $t('system.nickName') }}</view>
          </template>
          <nw-Input
            v-model="formData.nickName"
            :label="$t('system.newNickname')"
            :maxlength="16"
          ></nw-Input>
        </uni-forms-item>
      </uni-forms>
    </scroll-view>
  </CustomModal>
</template>

<script setup>
defineOptions({
  name: 'UpdateNickName',
  inheritAttrs: false
})

const props = defineProps({
  row: {
    type: Object,
    default: () => {}
  },
  deviceSn: {
    type: [String, Number],
    default: ''
  }
})
const visible = defineModel({
  type: Boolean,
  default: false
})
const emit = defineEmits(['update'])

const { bindDeviceList } = storeToRefs(useDeviceStore())
const uToastRef = ref(null)
const uFormRef = ref(null)
const formData = ref({
  nickName: ''
})
const rules = {
  nickName: {
    rules: g_rules.singleLineText(g_t('system.newNickname'))
  }
}

onMounted(_ => {})

const modelConfirm = _ => {
  uFormRef.value
    .validate()
    .then(res => {
      const data = bindDeviceList.value.find(item => item.sn === props.deviceSn)
      data.nickName = formData.value.nickName
      uToastRef.value.show({
        type: 'success',
        message: g_t('system.updateNickSuccess')
      })
      visible.value = false
      emit('update')
    })
    .catch(err => {
      console.log('err', err)
    })
}
</script>

<style lang="scss" scoped>
.nw-label {
  width: 80rpx;
}
</style>
